<!-- 预约页设置面板 -->
<template>
    <el-tabs modelValue="page" stretch>
        <el-tab-pane :label="`${element.name}设置`" name="page">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="基本设置" name="1">
                        <layout-pane label="显示未来几天">
                            <si-input-number
                                v-model="element.customFeature.displayDays"
                                :min="1"
                                :max="15"
                            />
                        </layout-pane>

                        <layout-pane label="逾期是否显示">
                            <el-switch
                                v-model="element.customFeature.hiddenGoodsPrice"
                                :active-value="2"
                                :inactive-value="1"
                            />
                        </layout-pane>

                        <layout-pane label="已预约是否显示">
                            <el-switch
                                v-model="element.customFeature.displayBookedItemMode"
                                :active-value="2"
                                :inactive-value="1"
                            />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="页面样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="基本设置" name="1">
                        <layout-pane label="主体颜色">
                            <si-color-picker
                                v-model="element.customFeature.theme.primaryColor"
                                show-alpha
                            />
                        </layout-pane>

                        <layout-pane label="字体颜色">
                            <si-color-picker
                                v-model="element.customFeature.theme.primaryFontColor"
                                show-alpha
                            />
                        </layout-pane>

                        <layout-pane label="右上角字体颜色">
                            <si-color-picker
                                v-model="element.customFeature.theme.secondaryFontColor"
                                show-alpha
                            />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { defineComponent, toRefs } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiColorPicker,
    SiInputNumber
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'ScheduleSetting',
    components: {
        LayoutPane,
        SiColorPicker,
        SiInputNumber
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { element } = toRefs(props)

        return {
            element
        }
    }
})
</script>